import 'package:flutter/material.dart';
import 'package:flutter_shop_template/pages/widgets/card/four.dart';

class ClassifyListGrass extends StatefulWidget {
  const ClassifyListGrass({Key? key}) : super(key: key);

  @override
  _ClassifyListGrassState createState() => _ClassifyListGrassState();
}

class _ClassifyListGrassState extends State<ClassifyListGrass> {
  List<String> tabs = [
    "全部",
    "全面屏电视",
    "教育电视",
    "OLED电视",
    "智慧屏4K",
    "超清电视",
    "55英寸",
    "65英寸",
    "电视配件"
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Theme(
        data: Theme.of(context).copyWith(),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: const Text('种草特辑'),
            actions: [
              IconButton(onPressed: () {}, icon: const Icon(Icons.search))
            ],
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(48),
              child: Container(
                color: Colors.white,
                child: TabBar(
                  isScrollable: true,
                  labelColor: Colors.indigo,
                  unselectedLabelColor: Colors.black.withOpacity(.75),
                  tabs: tabs
                      .map(
                        (e) => Tab(
                          text: e,
                        ),
                      )
                      .toList(),
                ),
              ),
            ),
          ),
          body: SafeArea(
            child: TabBarView(
                children: tabs
                    .map((e) => GridView.count(
                          padding: const EdgeInsets.all(20),
                          crossAxisCount: 2,
                          childAspectRatio: 0.68,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 5,
                          children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                              .map(
                                (e) => CustomCard4(
                                  imageUrl:
                                      "https://cdn.xihaf.com/template/col$e.jpg",
                                  title: '九味佳 日式和风酱油0脂肪油醋汁健身餐轻食调味料酱汁268g 3瓶装',
                                ),
                              )
                              .toList(),
                        ))
                    .toList()),
          ),
        ),
      ),
    );
  }
}
